import React, { useEffect } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import PlanManagementSchedule from '@COMPONENTS/PlanManagement/PlanManagementSchedule'
import { LanguageType } from '@INTERFACES/Common'
import { useSelector } from 'react-redux'
import { RootStateITF } from '@REDUXITF/index'
import { ManagementPlanStateITF } from '@REDUXITF/managementPlan'
import PlanMyRight from '@COMPONENTS/PlanManagement/PlanMyRight'
import AuxiliaryTraining from '@COMPONENTS/PlanManagement/AuxiliaryTraining'
import RecommendGoods from '@COMPONENTS/PlanManagement/RecommendGoods'
import RecommendPlan from '@COMPONENTS/PlanManagement/RecommendPlan'
import { PatientITF } from '@INTERFACES/Patient'
import { TagITF } from '@INTERFACES/Tag'
import { getTagIds } from '@UTILS/common'
import { STORAGE_KEY } from '@CONSTANTS/common'
import managementPlanActions from '@ACTIONS/managementPlan'
import { useRequest } from '@HOOKS/useRequest'
import { useAcPermission } from '@HOOKS/useSpringRainLogin'

interface Props {
  language: LanguageType
  showLogin: () => void
  hideRecommendPlan: boolean
  virtualHeight?: number
}
const getTagsStr = (patients: PatientITF[], hasPlan: boolean, tagsParams: TagITF[]) => {
  let tagsArray = []
  if (hasPlan) {
    tagsArray = getTagIds(tagsParams)
  } else {
    tagsArray = getTagIds(patients.find(item => item.DefaultPatientEnabled)?.PresentHistory || [])
  }
  return JSON.stringify(tagsArray || [])
}
const MyPainManagement: React.FC<Props> = ({ language, showLogin, hideRecommendPlan, virtualHeight = 0 }) => {
  const {
    myPainManagement, planSummary, recommendGoods
  } = useSelector<RootStateITF, ManagementPlanStateITF>(state => state.managementPlan)
  const isDisabledConsultation = useSelector<RootStateITF, boolean>(state => state.auth.isDisabledConsultation)
  const { mainBannerEvents } = useSelector<RootStateITF, ManagementPlanStateITF>(state => state.managementPlan)
  const myPatients = useSelector<RootStateITF, PatientITF[]>(state => state.patient.myPatients)
  const { dispatchGetRecommendGoods } = managementPlanActions
  const getRecommendGoods = useRequest(dispatchGetRecommendGoods)
  const { isSpringRain } = useAcPermission()

  const {
    HasPainManagement, DailyContents, Title, PainManagementId, CreatedDate, CurrentDay, ShipmentList,
    Tags, OrderId, ShipmentState, SignedDate, PicTextConsultation } = myPainManagement || {}
  const relatedTags = HasPainManagement ? Tags : []
  const tagsStr = getTagsStr(myPatients, HasPainManagement, Tags)

  if (Taro.getStorageSync(STORAGE_KEY.planVideoStorage)?.planId) {
    if (Taro.getStorageSync(STORAGE_KEY.planVideoStorage)?.planId !== PainManagementId) {
      Taro.removeStorageSync(STORAGE_KEY.planVideoStorage)
      Taro.setStorageSync(STORAGE_KEY.planVideoStorage, { planId: PainManagementId })
    }
  } else {
    Taro.setStorageSync(STORAGE_KEY.planVideoStorage, { planId: PainManagementId })
  }

  const showGoods = Array.isArray(ShipmentList) && ShipmentList.length > 0
  const title = Title?.[language] || ''
  useEffect(() => {
    getRecommendGoods(tagsStr)
  }, [getRecommendGoods, tagsStr])
  const hasMainBanner = Array.isArray(mainBannerEvents) && mainBannerEvents.length > 0
  return (
    <View>
      <PlanManagementSchedule
        virtualHeight={virtualHeight}
        data={DailyContents}
        title={title}
        pId={PainManagementId}
        createdDate={CreatedDate || new Date().getTime()}
        currentDay={CurrentDay}
        planSummary={planSummary}
        hasMainBanner={hasMainBanner}
      />
      <PlanMyRight
        shipmentList={ShipmentList}
        orderId={OrderId}
        shipmentState={ShipmentState}
        signedDate={SignedDate}
        showGoods={showGoods}
        painManagementId={PainManagementId}
        picTextConsultation={PicTextConsultation}
      />
      {!isSpringRain && <RecommendGoods goods={recommendGoods} language={language} isShowTopLine={false} hasPlan />}
      {!isSpringRain && (
      <AuxiliaryTraining
        disabled={isDisabledConsultation}
        tags={relatedTags}
        showLogin={showLogin}
        isShowTopLine={false}
        hasPlan
      />
      )}
      {![hideRecommendPlan, isSpringRain].includes(true) && <RecommendPlan isShowTopLine={false} />}
    </View>
  )
}

export default MyPainManagement
